<template>
  <a-row class="biz-user-select-modal" type="flex" :gutter="8">
    <a-col class="left">
      <slot name="left">
        <a-select
          mode="multiple"
          labelInValue
          optionLabelProp="value"
          placeholder="请选择用户"
          v-model="selectValue"
          allowClear
          :open="selectOpen"
          style="width: 100%;"
          @dropdownVisibleChange="handleDropdownVisibleChange"
        />
      </slot>
    </a-col>

    <a-col class="right">
      <a-button type="primary" icon="search" @click="visible=true">选择</a-button>
    </a-col>

    <user-select-modal
      v-model="selectValue"
      :visible.sync="visible"
    />
  </a-row>
</template>

<script>
import UserSelectModal from './UserSelectModal'

export default {
  name: 'BizUserSelectModal',
  components: { UserSelectModal },
  props: {
    value: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      selectValue: [],
      visible: false,
      selectOpen: false
    }
  },
  computed: {},
  watch: {
    value: {
      immediate: true,
      handler (val) {
        if (val) {
          this.selectValue = val
        } else {
          this.selectValue = []
        }
      }
    },
    selectValue: {
      deep: true,
      handler (val) {
        this.$emit('input', val)
      }
    }
  },
  methods: {
    handleDropdownVisibleChange () {
      // 解决点击选择器的时出现弹框问题，open 设置为 false 了，点击后还是添加了 open 样式，导致点击事件失效
      this.selectOpen = true
      this.$nextTick(() => {
        this.selectOpen = false
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .biz-user-select-modal {

    @width: 82px;

    .left {
      width: calc(100% - @width - 8px);
    }

    .right {
      width: @width;
    }

    .full {
      width: 100%;
    }

    /deep/ .ant-select-search__field {
      display: none !important;
    }
  }
</style>
